<template>
  <div class="frindly-links-wrapper q-pa-sm">
    <div class="links-categories row items-center justify-between">
      <div
        class="col text-center cursor-pointer relative-position"
        v-for="(link, idx) in links" :key="idx"
        @click="linksCategoryClicked(link, idx)">
        {{link.label}}

        <q-icon name="fas fa-caret-down" :class="{'rotate-180': category === idx}"></q-icon>

        <q-menu max-width="100%" class="links-menu"
          v-if="useMenu"
          :content-style="{'background': background, color}">
          <q-list class="links-menu-list"
            :style="{'background-color': background, color}">
            <div v-for="(child, cidx) in (link.children) || []" :key="cidx">
              <div
                class="links-menu-list-label q-pa-sm q-px-md"
                v-if="child.label">{{child.label}}</div>

              <div
                  class="links-menu-list-item-wrapper q-px-md"
                  v-for="(lk, lidx) in (child.children || [])" :key="lidx">

                <q-item
                  class="links-menu-list-item"
                  v-close-popup
                  :clickable="!!lk.url"
                  @click="linkItemClicked(lk)"
                >
                  <q-item-section>{{lk.label}}</q-item-section>
                </q-item>

                <q-item
                  class="links-menu-list-item child-item q-ml-md"
                  v-close-popup
                  :clickable="!!clk.url"
                  @click="linkItemClicked(clk)"
                  v-for="(clk, clkIdx) in lk.children || []" :key="clkIdx">
                  <q-item-section>{{clk.label}}</q-item-section>
                </q-item>
              </div>
            </div>
          </q-list>
        </q-menu>
      </div>

    </div>

    <div class="links-list row justify-around q-pa-md q-px-xl"
      v-if="!useMenu && (typeof category === 'number') && links[category]">
      <div v-for="(child, idx) in (links[category].children) || []" :key="idx">
        <div class="links-list-label q-mb-sm q-py-md" v-if="child.label">{{child.label}}</div>
        <div
          class="links-link q-my-xs q-px-md" :class="{'cursor-pointer': link.url}"
          @click="linkItemClicked(link)"
          v-for="(link, lidx) in (child.children || [])" :key="lidx">
          {{link.label}}

            <div
              class="links-link-child q-pl-md"
              v-for="(clink, cidx) in (link.children || [])" :key="cidx">
              {{clink.label}}
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FrindlyLinks',
  props: {
    useMenu: {
      type: Boolean,
      default: true,
    },
    links: {
      type: Array,
      default: () => [
      ],
    },
    background: { type: String },
    color: { type: String },
  },
  data() {
    return {
      category: 0,
      showLinksMenu: false,
    };
  },
  computed: {
  },
  methods: {
    linksCategoryClicked(link, idx) {
      this.showLinksMenu = this.useMenu && true;
      this.category = (this.category === idx) ? null : idx;
    },
    linkItemClicked(link) {
      if (!link || !link.url) return;

      if (/[a-z]*:\/\/.*/.test(link.url)) {
        window.open(link.url);
      } else {
        this.$router.push(link.url);
      }

      this.$emit('clicked', link);
    },
  },
};
</script>

<style lang="scss" scoped>
.links-categories .col:not(:last-child) {
  &::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 15%;
    width: 1px !important;
    height: 70%;
    background-color: currentColor;

    opacity: 0.7;
  }
}

.links-menu {
  &-list {
    &-label {
      font-size: 1.2em;
      font-weight: 500;
    }
    &-item {
      color: currentColor;
    }
  }
}

.links-list-label {
  font-size: 1.2em;
  font-weight: 500;
}
</style>

<style lang="scss">
</style>
